<template>
  <div>
    <!-- 文章列表 -->
    <!-- 
        van-list组件使用：
        loading :   是否加载中? 默认为fasle   如果loading为true时 不会自动调用onload 
        finished :  所有数据是否加载完毕? 默认为false 
                    如果finished为true 不会自动调用onLoad
        finished :  所有数据在家完毕之后 在底部呈现的提示文本
        onLoad :    用来加载数据的事件处理函数 负责调接口 拿数据 并且把数据push到数组变量
        list :  存放列表数据
        error : 控制是否出现错误 默认为fasle
        如果网络出错了 就应该把error设置为true
        如果error为true呈现加载失败的错误提示

          onLoad事件处理函数的特点:
          1.实例化van-list组件时会自动调用onload 且会把数据铺满屏幕
          2.van-list组件自动调用onload时，会自动把loading设置为true
          3.上拉触底时且finished为fasle 会自动调用onload         
     -->
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      :success-duration="500"
      success-text="刷新成功"
    >
      <div class="main" ref="articleList">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
        >
          <!-- 创建一个具体文章项的组件 -->
          <article-item
            v-for="article in list"
            :article="article"
            :key="article.art_id"
          ></article-item>
          <!-- <van-cell v-for="item in list" :key="item.art_id" :title="item.title" /> -->
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { throttle } from "lodash";
// 导入推荐新闻列表接口
import { getArticle } from "@/api/article";
import articleItem from "./articleItem.vue";
export default {
  // 接收
  name: "channelsList",
  components: { articleItem },
  props: {
    Clist: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      // 设置一个变量 存返回的 时间戳 / 页码
      timestamp: null,
      // 错误提示
      error: false,
      // 下拉刷新加载状态
      isLoading: false,
    };
  },
  methods: {
    async onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      /*onload中要做的6件事情
          1.调新闻列表接口 拿到当前页的数据
          2.把数据push到list
          3.把loading设置为fasle
          4.判断下一页有没有数据
          5.如果有下一页数据  修改页码/分页参数
          6.将finished设置为true 表示所有数据加载完毕 */
      try {
        const res = await getArticle({
          channel_id: this.Clist.id,
          timestamp: this.timestamp || Date.now(),
          with_top: 1,
        });
        //   console.log(res);
        // console.log("onload加载了");

        // 模拟网络异常抛出错误
        // if (Math.random() > 0.5) {
        // JSON.parse() 把不能转换为对象的字符串转对象的时候 会报错
        //   JSON.parse("awwww");
        // }

        this.list.push(...res.data.results);
        // 如果返回的pre_timestamp属性为null就是最后一页数据了 null为fasle
        if (res.data.pre_timestamp) {
          // 如果还有数据 将时间戳 改为最新的时间戳
          this.timestamp = res.data.pre_timestamp;
          // console.log(this.timestamp);
        } else {
          this.finished = true;
        }
      } catch (error) {
        // 如果捕获到异常执行的代码
        this.error = true;
      } finally {
        // 无论何时都会执行的代码 调完接口 list会自动将loading设置为true意义为加载中
        this.loading = false;
      }
    },
    onRefresh() {
      // 下拉刷新 重置数组为空
      this.list = [];
      this.finished = false;
      this.loading = true;
      this.timestamp = null;
      // 调用调接口函数
      this.onLoad();
      // 修改加载状态为fasle
      this.isLoading = false;
    },
  },
  //  在挂载后钩子函数中操作DOM
  //  设置自定义属性 记录滚动条位置
  mounted() {
    console.log(this.$refs.articleList);
    // 通过第三方包lodash 的方法完成节流    throttle()第三方方法 节流
    this.$refs.articleList.addEventListener(
      "scroll",
      throttle(function () {
        // console.log(this.scrollTop);
        // 设置自定义属性 把滚动条位置添加上去
        this.setAttribute("scroll-Top", this.scrollTop);
      }, 500)
    );
  },
  // 由于缓存了组件 多了两个钩子函数 分别是 被激活  失去激活
  activated() {
    // 当文章列表被重新激活时，拿到之前设置的自定义属性 设置给滚动条scrollTop
    const Dist = this.$refs.articleList.getAttribute("scroll-Top");
    // 设置给DOM元素的
    this.$refs.articleList.scrollTop = Dist;
  },
};
</script>

<style lang="less" scoped>
//
/deep/.main {
  height: calc(100vh - 188px);
  overflow: auto;
  margin-top: 88px;
}
</style>